<template>
  <div ref="lavContainer" :style="style" />
</template>

<script>
import lottie from 'lottie-web'

export default {
  props: {
    options: {
      type: Object,
      required: true
    },
    height: Number,
    width: Number
  },

  data() {
    return {
      style: {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    }
  },

  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: 'html/svg',
      loop: true,
      autoplay: true,
      animationData: this.options.animationData
    })
    this.$emit('animCreated', this.anim)
  }
}
</script>
